<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
    .face{
	  width:200px;
	  height:200px;
	  background-color:yellow;
	  box-shadow:2px 2px 2px rgb(255,102,102);
	  margin-left:auto;
	  margin-right:auto;
	  border-radius:50%;
	  position:relative;
	}
    .mouth{
	  width:150px;
	  height:85px;
	  background-color:rgb(255,51,102);
	  position:absolute;
	  left:25px;
	  top:100px;
	  border-radius:0px 0px 75px 75px;
	  overflow:hidden;
	}
	.tooth{
	   width:150px;
	   height:10px;
	   background-color:white;
	}
	.tongue{
	   width:100px;
	   height:100px;
	   background-color:black;
	   border-radius:50px;
	   position:absolute;
	   left:25px;
	   top:30px;
	}
	.lefteye{
	  width:15px;
	  height:15px;
	  background-color:black;
	  border-radius:50%;
	  position:absolute;
	  left:35px;
	  top:50px;
	}
	.righteye{
	  width:15px;
	  height:15px;
	  background-color:black;
	  border-radius:50%;
	  position:absolute;
	  right:35px;
	  top:50px;
	}
	@keyframes bete{
	   0%{
	     margin-top:0px;
	   }
	   100%{
	     margin-top:5px;
	   }
	}
	.face:hover .mouth{
	   animation:bete 0.1s linear infinite alternate;
	}
	.face:hover .lefteye{
	   top:55px;
	   height:5px;
	}
	.face:hover .righteye{
	   top:55px;
	   height:5px;
	}
  </style>
 </head>
 <body>
    <div class="face">
	  <div class="mouth">
	     <div class="tooth"></div>
		 <div class="tongue"></div>
	  </div>
	  <div class="lefteye"></div>
	  <div class="righteye"></div>
	</div>
 </body>
</html>
